<!-- 左侧工具条：大纲模块 -->
<template>
    <div class="outline">
        <a-tree v-model:selectedKeys="data.selectedKeys" :tree-data="data.treeData" @select="onSelect" draggable
            :field-names="fieldNames" :default-expand-all="true" :auto-expand-parent="true">
            <template #title="{ dataRef }">
                <div class="tree-node">
                    <component :is="dataRef.icon" class="tree-node-icon"></component>
                    <span>{{ dataRef.label }}</span>
                    <span class="tree-node-text">{{ dataRef.id }}</span>
                </div>
            </template>
        </a-tree>
    </div>
</template>

<script setup>
import { reactive, watch, defineProps } from 'vue'
import { generateData } from '../../pageManager.js'

const emit = defineEmits(['handleSetSelectItem', 'resetSelectItem'])

const props = defineProps({
    selectItem: {
        type: Object,
    },
    fieldNames: {
        type: Object,
        default: {
            children: 'children',
            title: 'label',
            key: 'id'
        }
    }
})

// 数据
const data = reactive({
    selectedKeys: ['root'],
    treeData: [],
})

// 监听
watch(() => generateData.data, () => {
    data.treeData = []
    data.treeData.push(generateData.data)
}, { deep: true })

watch(() => props.selectItem, (obj) => {
    if (obj != undefined) {
        data.selectedKeys = [obj.id]
    } else {
        data.selectedKeys = ['root']
    }
}, { deep: true })

const created = () => {
    data.treeData.push(generateData.data)
}

created()


/**
 * @method
 * @desc 选择节点
 * @param {Object} item 节点key值
 * @param {Object} datas 节点对象
 */
const onSelect = (key, datas) => {
    // console.log("选择节点：", datas);
    if (datas.node.id == "root") {
        emit("resetSelectItem")
    } else {
        emit("handleSetSelectItem", getSelectItem(datas.node.id))
    }
}


/**
 * @method
 * @desc 获取选中的组件
 * @param {String} key 组件的key值
 * @returns {Object} 组件对象
 */
const getSelectItem = (key) => {
    // let item = this.filterItem(key, this.data.children);
    let item = filterItem(generateData.data.children, 'id', key)
    return item
}

/**
 * @method
 * @desc 过滤组件
 * @param {Array} jsonObj json对象或数组
 * @param {String} key 对应的字段
 * @param {String} value 字段值
 * @returns {Object} 返回组件对象
 */
const filterItem = (jsonObj, key, value) => {
    // 循环所有键
    let array = []
    for (let v in jsonObj) {
        let element = jsonObj[v]
        // 1.判断是对象或者数组
        if (typeof (element) == 'object') {
            let result = filterItem(element, key, value)
            if (result) return result
        } else {
            if (v == key) {
                if (element == value) return jsonObj
            }
        }
    }
}

</script>

<style lang="less" scoped>
.outline {
    width: 100%;
    // border: 1px solid red;
    padding: 5px;
    overflow: auto;
}

.tree-node-icon {
    margin-right: 8px;
}

.tree-node {
    display: flex;
    align-items: center;
    .tree-node-text {
        font-size: 13px;
        color: #bbbaba;
        padding-left: 10px;
    }
}

:deep(.ant-tree .ant-tree-switcher) {
    width: 15px;
}

:deep(.ant-tree-switcher-noop) {
    display: none;
}

:deep(.ant-tree .ant-tree-node-content-wrapper) {
    white-space: nowrap;
}
</style>